<template>
    <div class="property-box">
        <el-row :gutter="20" type="flex" justify="space-between">
            <el-col :sm="12" :md="6" :lg="6" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>项目总数</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text">
                        <h1>{{headData.projectNumber}}</h1>
                        <p>个（不含在建项目）</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="6" :lg="6" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>总建筑面积</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text">
                        <h1>{{headData.constructionArea}}</h1>
                        <p>m²</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="6" :lg="6" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>资产总套数</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text">
                        <h1>{{headData.totalAssets}}</h1>
                        <p>套</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="6" :lg="6" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>自用率</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-flex">
                        <div>
                            <el-progress type="circle" :percentage="headData.useRate.percentage" :width="80" :stroke-width="4" :color="'#666666'"></el-progress>
                        </div>
                        <span class="line"></span>
                        <div>
                            <h1>{{headData.useRate.value}}</h1>
                            <p>m²</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="12" :lg="12" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>空置率</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-flex">
                        <div>
                            <el-progress type="circle" :percentage="headData.vacancyRate.percentage" :width="80" :stroke-width="4" :color="'#ad321c'"></el-progress>
                        </div>
                        <span class="line"></span>
                        <div>
                            <h1>{{headData.vacancyRate.value}}</h1>
                            <p>m²</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="12" :lg="12" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>出租率</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-flex card-circle">
                        <div>
                            <el-progress type="circle" :percentage="headData.occupancyRate.value" :width="80" :stroke-width="4" :color="'#745af2'"></el-progress>
                            <p>面积出租率</p>
                        </div>
                        <span class="line"></span>
                        <div>
                            <el-progress type="circle" :percentage="headData.occupancyRate.percentage" :width="80" :stroke-width="4" :color="'#745af2'"></el-progress>
                            <p>套数出租率</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="12" :lg="12" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>物业类型使用情况Top4</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-flex">
                      <table class="card-table">
                          <tbody>
                          <tr v-for="item in headData.propertyTop4" :key="item.type">
                              <th>{{item.type}}</th>
                              <td>{{item.quantity}}</td>
                              <td>{{item.percentage}}%</td>
                              <td>
                                  <el-progress :stroke-width="15" :percentage="item.percentage" :show-text="false" :color="'#1563d1'"></el-progress>
                              </td>
                          </tr>
                          </tbody>
                      </table>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="12" :lg="12" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>项目资产面积Top4</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-flex">
                        <div id="myChart" style="width: 100%;height:100%;"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="property-main  box-shadow">
            <div class="main-header">
                <el-input
                    placeholder="输入项目名称"
                    prefix-icon="el-icon-search"
                    v-model="inputSearch"
                    @keyup.enter.native="handleInputSearch()">
                </el-input>
                <div>
                    <el-button @click="handleToLink">查看物业列表</el-button>
                    <el-button @click="handleToProjectLink">查看项目列表</el-button>
                    <el-button @click="showDialog">纠错</el-button>
                </div>
            </div>
            <el-tabs :tab-position="tabPosition" value="0"  class="main-center" @tab-click="handleTabClick">
                <el-tab-pane v-for="(item,index) in centered" :key="index" >
                    <span slot="label">
                        <div class="center-left">
                            <div>
                                <h3>{{item.projectName}}</h3>
                                <p>项目面积：{{item.landArea}}m²</p>
                                <p>资产总数：{{item.totalAssets}}户</p>
                            </div>
                            <el-button type="text" v-if="property_overview" @click="viewClick(item)">查看</el-button>
                        </div>
                    </span>
                    <div class="data-info">
                        <!--<div class="data-title">基本信息</div>
                        <div class="info-list mb20">
                            <dl>
                                <dt>项目编号</dt>
                                <dd>{{projectInfo.projectCode}}</dd>
                            </dl>
                            <dl>
                                <dt>项目名称</dt>
                                <dd>{{projectInfo.projectName}}</dd>
                            </dl>
                            &lt;!&ndash;<dl>
                                <dt>项目简称</dt>
                                <dd>{{projectInfo.projectDesc}}</dd>
                            </dl>&ndash;&gt;
                            <dl>
                                <dt>项目面积</dt>
                                <dd>{{projectInfo.projectArea}}</dd>
                            </dl>
                            <dl>
                                <dt>项目类型</dt>
                                <dd>{{getCardTypeValue(projectInfo.projectType,projectTypes)}}</dd>
                            </dl>
                            &lt;!&ndash;<dl>
                                <dt>宗地代码</dt>
                                <dd>{{projectInfo.projectCode}}</dd>
                            </dl>&ndash;&gt;
                            <dl>
                                <dt>开发单位</dt>
                                <dd>{{projectInfo.constructionUnit}}</dd>
                            </dl>
                            <dl>
                                <dt>联系人</dt>
                                <dd>{{projectInfo.contactName}}</dd>
                            </dl>
                            <dl>
                                <dt>联系电话</dt>
                                <dd>{{projectInfo.contactPhone}}</dd>
                            </dl>
                            <dl>
                                <dt>项目开工日期</dt>
                                <dd>{{projectInfo.onStreamTime}}</dd>
                            </dl>
                            <dl>
                                <dt>项目竣工日期</dt>
                                <dd>{{projectInfo.acceptanceTime}}</dd>
                            </dl>
                        </div>
                        <div class="data-title">物业信息</div>
                        <div class="info-list mb20">
                            &lt;!&ndash;<dl>
                                <dt>物业名称</dt>
                                <dd>{{projectInfo.propertyName}}</dd>
                            </dl>
                            <dl>
                                <dt>曾用名</dt>
                                <dd>{{projectInfo.usedName}}</dd>
                            </dl>&ndash;&gt;
                            <dl>
                                <dt>初始类别</dt>
                                <dd>{{getCardTypeValue(projectInfo.initialType,initialTypes)}}</dd>
                            </dl>
                            <dl>
                                <dt>规划用途</dt>
                                <dd>{{getCardTypeValue(projectInfo.planUse,planUses)}}</dd>
                            </dl>
                            <dl v-show="projectInfo.planUse === '30'">
                                <dt>停车位数(个)</dt>
                                <dd>{{projectInfo.parkingSpotNum}}</dd>
                            </dl>
                            <dl>
                                <dt>总栋数(栋)</dt>
                                <dd><a style="text-decoration: underline;color: #40a8ff" href="#" @click="buildingNumberClick(item)">{{projectInfo.totalBuildings}}</a></dd>
                            </dl>
                            <dl>
                                <dt>用地面积(m²)</dt>
                                <dd>{{projectInfo.useLandArea}}</dd>
                            </dl>
                            <dl>
                                <dt>占地面积(m²)</dt>
                                <dd>{{projectInfo.floorSpace}}</dd>
                            </dl>
                            <dl>
                                <dt>建筑面积(m²)</dt>
                                <dd>{{projectInfo.buildArea}}</dd>
                            </dl>
                            <dl>
                                <dt>使用面积(m²)</dt>
                                <dd>{{projectInfo.useArea}}</dd>
                            </dl>
                            <dl>
                                <dt>非经营面积(m²)</dt>
                                <dd>{{projectInfo.unmanagedArea}}</dd>
                            </dl>
                            <dl>
                                <dt>经营面积(m²)</dt>
                                <dd>{{projectInfo.managedArea}}</dd>
                            </dl>
                            <dl>
                                <dt>不分摊面积(m²)</dt>
                                <dd>{{projectInfo.noApportionedArea}}</dd>
                            </dl>
                            <dl>
                                <dt>建构价款(元)</dt>
                                <dd>{{projectInfo.buildPrice}}</dd>
                            </dl>
                            <dl>
                                <dt>物业权属</dt>
                                <dd>{{projectInfo.belong}}</dd>
                            </dl>
                            <dl>
                                <dt>权利人</dt>
                                <dd>{{projectInfo.obligee}}</dd>
                            </dl>
                            <dl>
                                <dt>权属性质</dt>
                                <dd>{{getCardTypeValue(projectInfo.ownershipNature,ownershipNatureTypes)}}</dd>
                            </dl>
                            <dl>
                                <dt>竣工日期</dt>
                                <dd>{{projectInfo.endTime}}</dd>
                            </dl>
                            <dl>
                                <dt>物业来源</dt>
                                <dd>{{getCardTypeValue(projectInfo.propertySource,propertySources)}}</dd>
                            </dl>
                            <dl>
                                <dt>管理权属</dt>
                                <dd>{{getCardTypeValue(projectInfo.manageUnit,manageUnits)}}</dd>
                            </dl>
                            <dl>
                                <dt>物业地址</dt>
                                <dd>{{getCardTypeValue(projectInfo.cityCode,cityAssembly)}}{{getCardTypeValue(projectInfo.countyCode,districtCollection)}}{{getCardTypeValue(projectInfo.projectStreet,streets)}}{{getCardTypeValue(projectInfo.communityName,communityNames)}}{{projectInfo.addressInfo}}</dd>
                            </dl>
                            <dl>
                                <dt>地图坐标</dt>
                                <dd>{{projectInfo.mapCoordinates}}</dd>
                            </dl>
                           &lt;!&ndash; <dl>
                                <dt>街道/社区办</dt>
                                <dd>{{projectInfo.projectStreet}}</dd>
                            </dl>
                            <dl>
                                <dt>社区</dt>
                                <dd>{{projectInfo.communityName}}</dd>
                            </dl>&ndash;&gt;
                        </div>
                        <div class="full mb20">
                            <dl>
                                <dt>备注信息</dt>
                                <dd>{{projectInfo.remark}}</dd>
                            </dl>
                        </div>
                        <div class="data-info">
                            <div class="data-title">土地信息</div>
                            <div class="info-list mb20">
                                <dl>
                                    <dt>宗地号</dt>
                                    <dd>{{landInfo.parcelNum}}</dd>
                                </dl>
                                <dl>
                                    <dt>宗地面积(m²)</dt>
                                    <dd>{{landInfo.parcelArea}}</dd>
                                </dl>
                                <dl>
                                    <dt>土地用途</dt>
                                    <dd>{{getCardTypeValue(landInfo.landUse,landUses)}}</dd>
                                </dl>
                                <dl>
                                    <dt>土地合同号</dt>
                                    <dd>{{landInfo.landContractNum}}</dd>
                                </dl>
                                <dl>
                                    <dt>地址</dt>
                                    <dd>{{landInfo.addressInfo}}</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="info-list mb20">
                            <dl class="full">
                                <dt>附件信息</dt>
                                <dt>
                                    <upload-media type="file"
                                                  ref="myUpload"
                                                  :busId="projectInfo.infoId"
                                                  :modelType="modelType"
                                                  :isShowFileList="true"
                                                  :isView="true">
                                    </upload-media>
                                </dt>
                            </dl>
                        </div>-->
                        <div class="resource-manage" >
                            <div class="card-box">
                                <div class="card-title">土地信息</div>
                                <el-form
                                    ref="landInfo"
                                    class="form-wrap"
                                    label-position="top"
                                    size="small"
                                    :model="projectInfo">
                                    <el-form-item label="宗地号" prop="parcelNum">
                                        <span class="in_txt">{{projectInfo.parcelNum}}</span>
                                    </el-form-item>
                                    <el-form-item label="宗地面积(m²)" prop="parcelArea">
                                        <span class="in_txt">{{projectInfo.parcelArea}}</span>
                                    </el-form-item>
                                    <el-form-item label="土地用途" prop="landUse">
                                        <span class="in_txt">{{getCardTypeValue(projectInfo.landUse,landUses)}}</span>
                                    </el-form-item>
                                    <el-form-item label="物业地址" prop="cityCode" class="full">
                                    <span class="in_txt">{{getCardTypeValue(projectInfo.cityCode,cityAssembly)}}
                                {{getCardTypeValue(projectInfo.countyCode,districtCollection)}}
                                {{getCardTypeValue(projectInfo.street,projectStreet)}}
                                {{getCardTypeValue(projectInfo.community,communityNameStreet)}}
                                {{projectInfo.addressInfo}}</span>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="resource-manage" >
                            <div class="card-box">
                                <div class="card-title">项目信息</div>
                                <el-form
                                    ref="propertyBasic"
                                    label-position="top"
                                    class="form-wrap"
                                    size="small"
                                    :model="projectInfo">
                                    <el-form-item label="项目编号" prop="projectCode">
                                        <span class="in_txt">{{projectInfo.projectCode}}</span>
                                    </el-form-item>
                                    <el-form-item label="项目国家编码" prop="projectCountryCode">
                                        <span class="in_txt">{{projectInfo.projectCountryCode}}</span>
                                    </el-form-item>
                                    <el-form-item label="项目名称" prop="projectName">
                                        <span class="in_txt">{{projectInfo.projectName}}</span>
                                    </el-form-item>
                                    <el-form-item label="项目面积(m²)" prop="projectArea">
                                        <span class="in_txt">{{projectInfo.projectArea}}</span>
                                    </el-form-item>
                                    <el-form-item label="项目类型" prop="projectType">
                                        <span class="in_txt">{{getCardTypeValue(projectInfo.projectType,projectType)}}</span>
                                    </el-form-item>
                                    <el-form-item label="管理权属" prop="manageUnit">
                                        <span class="in_txt">{{getCardTypeValue(projectInfo.manageUnit,manageUnits)}}</span>
                                    </el-form-item>
                                    <el-form-item  label="是否为更新项目" prop="isUpdate" v-if="addSource">
                                        <span class="in_txt">{{projectInfo.isUpdate === '1' ? '否' : '是'}}</span>
                                    </el-form-item>
                                    <el-form-item label="开发单位">
                                        <span class="in_txt">{{projectInfo.constructionUnit}}</span>
                                    </el-form-item>
                                    <el-form-item label="联系人">
                                        <span class="in_txt">{{projectInfo.contactName}}</span>
                                    </el-form-item>
                                    <el-form-item label="联系电话" prop="contactPhone" >
                                        <span class="in_txt">{{projectInfo.contactPhone}}</span>
                                    </el-form-item>
                                    <el-form-item label="当前阶段">
                                        <span class="in_txt">{{projectInfo.stage}}</span>
                                    </el-form-item>
                                    <el-form-item label="地图坐标" prop="mapCoordinates">
                                        <span class="in_txt">{{projectInfo.mapCoordinates}}</span>
                                    </el-form-item>
                                    <el-form-item label="备注" class="full">
                                        <span class="in_txt">{{projectInfo.remarks}}</span>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="resource-manage" >
                            <div class="card-box">
                                <div class="card-title">配套信息</div>
                                <div class="table-planning">
                                    <el-table :data="supportingFacilities" align="center">
                                        <el-table-column prop="propertyName" label="物业名称" width="120">
                                        </el-table-column>
                                        <el-table-column prop="projectType" label="物业类型" width="120">
                                            <template slot-scope="scope">
                                                <span>{{getCardTypeValue(scope.row.projectType,propertyTypes)}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="projectSubclassType" label="物业规划" width="120">
                                            <template slot-scope="scope">
                                                <span>{{getCardTypeValue(scope.row.projectSubclassType, propertyUseTypes)}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="floorSpace" label="占地面积(m²)" width="120">
                                        </el-table-column>
                                        <el-table-column prop="buildArea" label="建筑面积(m²)" width="120">
                                        </el-table-column>
                                        <el-table-column prop="transferMode" label="移交方式" width="120">
                                            <template slot-scope="scope">
                                                <span>{{getCardTypeValue(scope.row.transferType,transferModeOption)}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="remarks" label="备注" width="120">
                                            <template slot-scope="scope">
                                                <span :title="scope.row.remarks">{{scope.row.remarks | ellipsis}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="操作"
                                            width="100">
                                            <template slot-scope="scope">
                                                <el-button @click="handleClickLook(scope)" type="text" size="small">查看</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                        <div class="data-title">里程碑信息</div>
                        <div class="timeline">
                            <el-timeline :reverse="true">
                                <el-timeline-item
                                    v-for="(activity, index) in projectMilestones"
                                    :color="activity.color"
                                    :key="index">
                                    <h3>{{activity.milestoneName}}</h3>
                                    <div v-if="activity.materialsFormVoList" v-for="(item,index) in activity.materialsFormVoList" :key="index">
                                        <p>{{item.remarks}}</p>
                                        <p>{{item.original+ '(' + (item.fileSize / 1024 / 1024).toFixed(4) + 'M)'}}
                                            <span style="margin: 0 50px;">{{item.fileUploadTime}}</span>
                                            <a href="#" style="text-decoration: underline;color: #40a8ff" @click="downloadClick(item.fileId)">下载</a></p>
                                    </div>
                                   <!-- <p>{{activity.milestoneRemarks}}</p>
                                    <p v-if="activity.fileList" v-for="(file, index) in activity.fileList" :key="index">
                                        {{file.fileName+ '(' + (file.fileSize / 1024 / 1024).toFixed(4) + 'M)'}}
                                        <span style="margin: 0 50px;">{{file.fileUploadTime}}</span>
                                        <a href="#" style="text-decoration: underline;color: #40a8ff" @click="downloadClick(file.fileId)">下载</a>
                                    </p>-->
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <v-dialog
            title="物业信息纠错"
            :show.sync="dialogVisible"
            :closeOnClickModal="false"
            @beforeClose="beforeClose"
            width="700px">
            <div style="padding: 20px">
                <el-form ref="formError" :rules="errorCorrectionRules" :model="formError" label-width="80px" label-position="top">
                    <el-form-item label="纠错类型" prop="resource">
                        <el-radio-group v-model="formError.resource">
                            <el-radio label="数据计算错误"></el-radio>
                            <el-radio label="内容填写错误"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="错误描述" prop="desc">
                        <el-input type="text" v-model="formError.desc" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="foot">
                <el-button @click="cancel()">取 消</el-button>
                <el-button @click="commit">保 存</el-button>
            </span>
        </v-dialog>
        <supportFacilityInformation ref="supportFacilityInformation"></supportFacilityInformation>
    </div>
</template>

<script src="./index.js">
</script>

<style lang="scss" scoped>
@import "./index";
</style>
